<template>
  <el-alert
    title="拖动行可调整表格行显示顺序"
    type="success"
    :show-icon="false"
  >
  </el-alert>
  <div class="main-box">
    <div class="row-box table-header">
      <el-row :gutter="20">
        <el-col
          v-for="(item, index) in viewColumnsTableKey"
          :key="index"
          :span="item.span"
        >
          <div class="view-column-left">{{ item.name }}</div>
        </el-col>
      </el-row>
    </div>
    <div v-if="viewColumns.length>0">
      <el-form
        ref="formsTableRef"
        :model="viewColumns"
        label-width="140px"
        class="demo-ruleForm"
      >
        <draggable
          class="list-group"
          tag="transition-group"
          :component-data="componentData"
          :list="viewColumns"
          v-bind="dragOptions"
          item-key="timeId"
          @change="onDragChange"
        >
          <transition-group class="drag-center-item">
            <div
              class="view-column"
              v-for="(column, index1) in viewColumns"
              :key="`${column.timeId}-${index1}`"
            >
              <el-row :gutter="20">
                <el-col
                  v-for="(item, index) in viewColumnsTableKey"
                  :key="index"
                  :span="item.span"
                  class="table-content"
                >
                  <div
                    v-if="item.value === 'serialNumber'"
                    class="view-column-index"
                  >
                    {{ index1 + 1 }}
                  </div>
                  <slot
                    v-else
                    :name="item.value"
                    :row="column"
                    :index="index1"
                  ></slot>
                </el-col>
              </el-row>
            </div>
          </transition-group>
        </draggable>
      </el-form>
    </div>
    <div v-else class="view-column" style="line-height: 48px;text-align: center;color: #616161;">暂无数据</div>
  </div>
</template>
<script>
import { VueDraggableNext } from "vue-draggable-next";
import { defineComponent, reactive,nextTick } from "vue";

export default defineComponent({
  name: "CustomColumn",

  props: {
    // 数据
    viewColumns: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 表头
    viewColumnsTableKey: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },

  components: {
    draggable: VueDraggableNext,
  },

  emits: ["update:viewColumns", "drag-change"],

  setup(props, { emit }) {
    const dragOptions = reactive({
      animation: 200,
      group: 'description',
      disabled: false,
      ghostClass: 'ghost',
      // chosenClass: 'chosen',
      // dragClass: 'drag',
      // forceFallback: false,
      // fallbackOnBody: false
    });

    const componentData = reactive({
      tag: 'ul',
      type: 'transition-group'
    });

    const onDragChange = (event) => {
      nextTick(() => {
        // 通知父组件数据顺序发生变化
        emit("update:viewColumns", [...props.viewColumns]);
        emit("drag-change", {
          event,
          newOrder: [...props.viewColumns],
        });
      })
    };

    return {
      dragOptions,
      componentData,
      onDragChange,
    };
  },
});
</script>
<style lang="less" scoped>
.view-column {
  padding: 0;
  border-bottom: 1px solid #eee;
}
.view-column:last-child {
  border-right: none;
}
.table-header {
  color: #616161;
  font-size: 13px;
  font-weight: bold;
  line-height: 46px;
  background-color: #f8f8f9;
}
.main-box {
  border-top: 1px solid #eee;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
  margin-top: 10px;
}
.row-box{
  border-bottom: 1px solid #eee;
}
.el-col {
  border-right: 1px solid #eee;
  text-align: center;
}
.el-col:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
}
.el-col:last-child {
  border-right: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
